<template>
  <div
    class="login-container w100 h100 flex-row"
    style="justify-content: center"
  >
    <div class="login-content flex-column">
      <div class="flex-column login-content">
        <div class="con-item">
          <p class="form-title">{{ loginTitle }}</p>
          <div class="flex-column">
            <div class="form-label">用户名:</div>
            <el-input
              v-model.trim="userName"
              placeholder="请输入登录账号"
              size="large"
            ></el-input>
          </div>
          <div class="flex-column mT25">
            <div class="form-label">密码:</div>
            <el-input
              v-model.trim="passWord"
              type="password"
              placeholder="请输入密码"
              size="large"
            ></el-input>
          </div>
          <div class="mT25 mB25">
            <el-checkbox v-model="isRemember">记住密码</el-checkbox>
          </div>
          <el-button
            class="w100"
            type="primary"
            @click="handleLogin"
            size="large"
            :loading="loginLoad"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {title} from '@/settings'
import {setToken} from '@/utils/auth'
export default {
  name: "LoginName",
  setup() {
    const router = useRouter()
    const store = useStore()
    let state = reactive({
      userName: "", // 账号
      passWord: "", // 密码
      loginTitle: title,
      isRemember: true,
      loginLoad: false,
    });

    function handleLogin() {
      state.loginLoad = true
      // 模拟添加token
      setToken(Math.random().toString())
      // 登录成功后，获取菜单
      store.dispatch('setMenuList').then(()=>{
        state.loginLoad = false
        router.push('/')
      })
    }
    return {
      ...toRefs(state),
      handleLogin,
    };
  },
};
</script>
<style scoped>
.login-container {
  justify-content: space-between;
  background-image: url("../../assets/images/body.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.login-content {
  justify-content: center;
  margin-top: -100px;
}
.form-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
  /* color: $--color-primary; */
}

.form-label {
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 5px;
}

.login-title {
  margin-top: 134px;
  margin-bottom: 31px;
  text-align: center;
  z-index: 1;
}

.login-content {
  align-items: center;
  z-index: 100;
}

.con-item {
  width: 500px;
  background: #ffffff;
  border-radius: 4px;
  padding: 28px 42px 60px 42px;
}
</style>